<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>


</head>
<style>
    input.editable-select {
        background: #FFFFFF url("http://60.172.168.121:8877/img/arrow-down.gif") right center no-repeat;
        padding: 6px 16px;
        width: 100% !important;
        border: 1px solid #e5e6e7;
    }

    .editable-select-options {
        position: absolute;
        display: none;
        overflow: auto;
        padding: 0;
        background: #FFF;

        z-index: 10;
        width: 59.69% !important;
    }

    .editable-select-iframe {
        position: absolute;
        background: #FFF;
        z-index: 9;
        display: none;
    }

    .editable-select-options ul {
        margin: 0;
        padding: 0;
        z-index: 10;
        list-style: none;
        list-style-image: none;
        border: 1px solid #BDCDE9;
    }

    .editable-select-options li {
        cursor: default;
        padding: 2px 16px;
    }

    .editable-select-options li.selected {
        background: #1E90FF;
        color: #fff;
    }
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-mainMaterial-add">
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <label class="col-sm-3 control-label">工程公司：</label>
            <div class="col-sm-8">
                <select name="compId" id="compId" class="form-control noselect2">
                    <option value="">请选择</option>
                    <option th:each="pro:${userComp}" th:value="${pro.compId}"
                            th:text="${pro.compName}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">项目名称：</label>
            <div class="col-sm-8">
                <input type="hidden" id="oid" name="oid">
                <input type="text" class="form-control noselect2 shows" >
                <div id="inputselect">

                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">主材名称：</label>
            <div class="col-sm-8">
                <input name="mainMaterialName" id="mainMaterialName" class="form-control" type="text"
                       placeholder="请输入主材名称"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">单位：</label>
            <div class="col-sm-8">
                <select name="standard" id="standard" class="form-control noselect2">
                    <option value="">请选择</option>
                    <option th:each="standard:${standards}" th:value="${standard.id}"
                            th:text="${standard.name}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">理论用量：</label>
            <div class="col-sm-8">
                <input id="theoreticalDosage" name="theoreticalDosage" class="form-control" type="text"
                       placeholder="请输入理论用量"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">期末累计理论量A：</label>
            <div class="col-sm-8">
                <input id="ljLll" name="ljLll" class="form-control" type="text" placeholder="请输入期末累计理论量A"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">期末累计实耗量B：</label>
            <div class="col-sm-8">
                <input id="ljShl" name="ljShl" class="form-control" type="text" placeholder="请输入期末累计实耗量B"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">节超量：</label>
            <div class="col-sm-8">
                <input id="nodalExcess" name="nodalExcess" readonly="readonly" class="form-control" type="text"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">节超率：</label>
            <div class="col-sm-8">
                <input id="nodalExcessRate" name="nodalExcessRate" class="form-control" readonly="readonly"
                       type="text"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input id="remark" name="remark" class="form-control" type="text" placeholder="请输入备注"/>
            </div>
        </div>

    </form>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: jqueryEditableSelect-js"/>
<script type="text/javascript">
    var prefix = ctx + "mainMaterial";
    var prefixs = ctx + "outPutValue";
    var html;
    var value;
    $(function () {
        $("#compId").change(function () {
            $(".shows").hide();
            compId = $("#compId option:selected").val();
            $("#proName").val('');
            $.ajax({
                url: prefixs + '/findProByCompId',
                data: {
                    "compId": compId
                },
                success: function (data) {
                    console.log(data);
                    $("#proName").remove();
                    var str = '<select id="proName" name="proName" class="form-control noselect2" style="width: 100% !important;">';
                    str += '<option title="请选择" value="">' + "请选择" + '</option>';
                    for (var i in data.data) {
                        html = data.data[i].pro_name;
                        value = data.data[i].id;

                        str += '<option title="' + html + '" value="' + value + '">' + html + '</option>';
                    }
                    str += '</select>';
                    $("#inputselect").html(str);
                    $("#proName").editableSelect({
                        bg_iframe: false,
                        case_sensitive: false,
                        items_then_scroll: 10,
                        isFilter: false,
                        effects: 'slide',

                    });
                }
            })
        });
    })
    $("#ljShl").blur(function () {
        $("#nodalExcess").val($("#ljLll").val() - $("#ljShl").val());

        $("#nodalExcessRate").val((($("#ljLll").val() - $("#ljShl").val()) / $("#ljLll").val() * 100).toFixed(2) + '%');
    });


    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-mainMaterial-add").serializeArray();
            data[2].value = data[3].value;
            if (data[2].value == "请选择") {
                data[2].value = '';
            }
            data[1].value = $("#proName").val();

            console.log(data);
            $.operate.save(prefix + "/add", data);
        }
    }

</script>


</body>

</html>